<template>
    <div>
        <hr/>
        <br>
        <!-- 关键词搜索框 -->
        <div class="search">
            <el-input v-model="keyword" placeholder="请输入关键词" prefix-icon="el-icon-search" @keyup.enter.native="alternateText"></el-input>
        </div>
        <!-- 内容展示 -->
        <div class="article">
            <div v-for="(item, index) in needText" :key="index" v-html="item.text"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        props: [],
        components: {},
        data() {
            return {
                keyword: '',    // 关键词绑定
                // 原数据列表
                texts: [
                    {text: '春江潮水连海平，海上明月共潮生。'},
                    {text: '滟滟随波千万里，何处春江无月明！'},
                    {text: '江流宛转绕芳甸，月照花林皆似霰；'},
                    {text: '空里流霜不觉飞，汀上白沙看不见。'},
                    {text: '江天一色无纤尘，皎皎空中孤月轮。'},
                    {text: '江畔何人初见月？江月何年初照人？'},
                    {text: '人生代代无穷已，江月年年望相似。'},
                    {text: '不知江月待何人，但见长江送流水。'},
                    {text: '白云一片去悠悠，青枫浦上不胜愁。'},
                    {text: '谁家今夜扁舟子？何处相思明月楼？'},
                    {text: '可怜楼上月裴回，应照离人妆镜台。'},
                    {text: '玉户帘中卷不去，捣衣砧上拂还来。'},
                    {text: '此时相望不相闻，愿逐月华流照君。'},
                    {text: '鸿雁长飞光不度，鱼龙潜跃水成文。'},
                    {text: '昨夜闲潭梦落花，可怜春半不还家。'},
                    {text: '江水流春去欲尽，江潭落月复西斜。'},
                    {text: '斜月沉沉藏海雾，碣石潇湘无限路。'},
                    {text: '不知乘月几人归，落月摇情满江树。'}
                ],
                // 处理后的数据列表，要展示到html中去的
                needText: [],
            }
        },
        methods: {
            // 替换文字
            alternateText() {
                this.needText = [];
                let exp = new RegExp(this.keyword, 'g');
                let node = `<span>${this.keyword}</span>`;


                this.texts.map((item, index) => {
                    item = item.text.replace(exp,node);
                    this.needText.push({text: item});
                });
            }
        },
        mounted() {
            this.needText = this.texts;
        }

    }
</script>

<style type="text/scss" lang="scss" scoped>
    .search{
        width: 250px;
        margin: 0 auto;
    }
    .article{
        width: 100%;
        margin: 50px auto;
        &>div{
            text-align: center;
            margin: 15px 0;
            &::v-deep span{
                color: orange;
                font-weight: bold;
            }
        }
    }
</style>